<include file="Common:doc_head"/>
<style>
    /*参数输入框组*/
    .param-box{
        padding: 10px;
        border:1px solid rgba(78, 174, 214, 0.36);
        border-radius: 4px;
        margin:2rem 0px;
    }
    /*参数输入框*/
    .param-ipt{
        display: inline-block;
        width: 60%;
    }
    /*删除参数按钮*/
    .delParam{
       float: right;
        margin-top:-30px;
    }
</style>
<div class="container" style="">


    <div class="row" >
        <div class="col-md-12" style="">
            <form role="form">
                <div class="form-group">
                    <label>接口分类：</label>
                    <select class="form-control" id="type_id" name="type_id">
                        <volist name="typelist" id="t">
                            <option value="{$t.t_id}">{$t.t_name}</option>
                        </volist>
                    </select>
                    <a href="{:U('Doc/typelist')}?proid={$proid}">去设置分类</a>
                </div>
                <div class="form-group">
                    <label>接口名：</label>
                    <input type="text" class="form-control" id="title" placeholder="如： 用户注册" value="{$data.title}">
                </div>
                <div class="form-group">
                    <label>接口描述：</label>
                    <input type="text" class="form-control" id="desc" placeholder="接口描述可不填" value="{$data.desc}">
                </div>
                <div class="form-group">
                    <label>接口地址：</label>
                    <input type="text" class="form-control" id="url" placeholder="如：http://api.com/api/test.php" value="{$data.url}">
                </div>
                <div class="form-group">
                    <label>请求方式：</label>
                    <div>
                        <input type="text" class="form-control" id="request_type" placeholder="" value="{$data.request_type|default='post、get'}">
                    </div>
                </div>
                <div class="form-group">
                    <label>调用示例：</label>
                    <input type="text" class="form-control" id="exam_url" placeholder="输入在浏览器上直接带示例参数调用的链接 如：http://api.com/api/test.php?uid=11" value="{$data.exam_url}">
                </div>
                <div class="form-group">
                    <label>排序（越小的排越前面）：</label>
                    <input type="text" class="form-control" id="sort" placeholder="填写排序数字，越小的排越前面" value="{$data.sort|default=1}">
                </div>
                <div class="form-group p-group-box">
                    <label>传参：
                    <button class="btn btn-info btn-sm addParam">添加参数</button>
                    </label>
                    <empty name="data.param">
                        <!--<div class="param-box">
                        <button class="btn btn-warning btn-sm delParam" data-id="0">删除此参数</button>
                        <div class="p-b-item col-xs-12 col-sm-12 col-md-3 col-lg-3">
                            <label>参&nbsp;&nbsp;数&nbsp;&nbsp;名：</label>
                            <input class="form-control param-ipt p_name" placeholder="如：u_name">
                        </div>
                        <div class="p-b-item col-xs-12 col-sm-12 col-md-3 col-lg-3">
                            <label>类&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;型：</label>
                            <input class="form-control param-ipt p_type" placeholder="如：string">
                        </div>
                        <div class="p-b-item col-xs-12 col-sm-12 col-md-3 col-lg-3">
                            <label>描&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;述：</label>
                            <input class="form-control param-ipt p_desc" placeholder="如：用户名">
                        </div>
                        <div class="p-b-item col-xs-12 col-sm-12 col-md-3 col-lg-3">
                            <label>是否必填：</label>
                            <select class="form-control param-ipt p_must">
                                <option value="1">是</option>
                                <option value="0">否</option>
                            </select>
                        </div>
                        <div style="clear: both;"></div>
                        </div>-->
                        <else />
                        <volist name="data.param" id="p">
                            <div class="param-box">
                                <button class="btn btn-warning btn-sm delParam" data-id="{$p.p_id}">删除此参数</button>
                                <div class="p-b-item col-xs-12 col-sm-12 col-md-3 col-lg-3">
                                    <label>参&nbsp;&nbsp;数&nbsp;&nbsp;名：</label>
                                    <input class="form-control param-ipt p_name" placeholder="如：u_name" value="{$p.p_name}">
                                </div>
                                <div class="p-b-item col-xs-12 col-sm-12 col-md-3 col-lg-3">
                                    <label>类&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;型：</label>
                                    <input class="form-control param-ipt p_type" placeholder="如：string" value="{$p.p_type}">
                                </div>
                                <div class="p-b-item col-xs-12 col-sm-12 col-md-3 col-lg-3">
                                    <label>描&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;述：</label>
                                    <input class="form-control param-ipt p_desc" placeholder="如：用户名" value="{$p.p_desc}">
                                </div>
                                <div class="p-b-item col-xs-12 col-sm-12 col-md-3 col-lg-3">
                                    <label>是否必填：</label>
                                    <select class="form-control param-ipt p_must">
                                        <option value="1" <if condition="$p.p_must eq 1">selected</if>>是</option>
                                        <option value="0" <if condition="$p.p_must eq 0">selected</if>>否</option>
                                    </select>
                                </div>
                                <div style="clear: both;"></div>
                            </div>
                        </volist>
                    </empty>
                </div>
                <div class="form-group">
                    <label>返回值：</label>
                    <textarea class="form-control" id="json_str" rows="20" placeholder="填写接口返回值示例">{$data.json_str}</textarea>
                </div>
                <div class="form-group" style="text-align: center;">
                    <button class="btn btn-primary btn-lg save">保存</button>
                    <button class="btn btn-primary btn-lg back">返回</button>
                </div>
            </form>
        </div>
    </div>

</div>
</div>
<div id="paramtpl" style="display: none;">
    <div class="param-box">
        <button class="btn btn-warning btn-sm delParam" data-id="0">删除此参数</button>
        <div class="p-b-item col-xs-12 col-sm-12 col-md-3 col-lg-3">
            <label>参&nbsp;&nbsp;数&nbsp;&nbsp;名：</label>
            <input class="form-control param-ipt p_name" placeholder="如：u_name">
        </div>
        <div class="p-b-item col-xs-12 col-sm-12 col-md-3 col-lg-3">
            <label>类&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;型：</label>
            <input class="form-control param-ipt p_type" placeholder="如：string">
        </div>
        <div class="p-b-item col-xs-12 col-sm-12 col-md-3 col-lg-3">
            <label>描&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;述：</label>
            <input class="form-control param-ipt p_desc" placeholder="如：用户名">
        </div>
        <div class="p-b-item col-xs-12 col-sm-12 col-md-3 col-lg-3">
            <label>是否必填：</label>
            <select class="form-control param-ipt p_must">
                <option value="1">是</option>
                <option value="0">否</option>
            </select>
        </div>
        <div style="clear: both;"></div>
    </div>
</div>



<script type="text/javascript">
    $(document).ready(function(){
        $('title').text('编辑接口【{$pro_name}】');
        $('#type_id').val('{$data.type_id}');
        $('#waiting').css('height',$('html').height());
        $('#waiting').css('background','rgba(255, 255, 255, 0.3)');
        $('#waiting i').css('margin-top','50%');
        
        //保存接口
        $('.save').click(function () {
            layer.prompt({title: '输入说明，并确认', formType: 2}, function(pass, index){
              layer.close(index);
              if(pass!=""){
                    $('#waiting').show();
                    var data={
                        id:'{$data.id}',
                        proid:'{$proid}',
                        title:$('#title').val(),
                        desc:$('#desc').val(),
                        url:$('#url').val(),
                        exam_url:$('#exam_url').val(),
                        request_type:$('#request_type').val(),
                        type_id:$('#type_id').val(),
                        json_str:$('#json_str').val(),
                        sort:$('#sort').val(),
                        api_record:pass
                    };
                    var params=[];
                    $('.p-group-box .param-box').each(function () {
                        var tmp={
                            p_id:$(this).find('.delParam').attr('data-id'),
                            p_name:$(this).find('.p_name').val(),
                            p_type:$(this).find('.p_type').val(),
                            p_desc:$(this).find('.p_desc').val(),
                            p_must:$(this).find('.p_must').children('option:selected').val()
                        };
                        params.push(tmp);
                    });
                    data.params=params;
                    $.post('{:U("Doc/saveApi")}',data,function (ret) {
                        if('{$data.id}'!=''){
                            self.location=document.referrer;
                        }else{
                            $('#waiting').hide();
                            alert(ret.message);
                        }
                    },'json');
                    return false;
              }else{
                layer('必须填写说明');
                return false;
              }
            }); 
            return false;
        });
        //添加参数
        $('.addParam').click(function () {
            var obj=$('#paramtpl .param-box').clone(true);
            $('.p-group-box').append(obj);
            return false;
        });
        //删除参数
        $('.delParam').click(function () {
            var p_id=$(this).attr('data-id');
            var this_param=$(this).parent('.param-box');
            if(p_id!=0){
                $('#waiting').show();
                $.post('{:U("Doc/delParam")}',{p_id:p_id},function (ret) {
                    if(ret.status==200){
                        this_param.remove();
                    }else{
                        alert(ret.message);
                    }
                    $('#waiting').hide();
                },'json');
            }else{
                this_param.remove();
            }
            return false;
        });
        $('.back').click(function () {
            self.location=document.referrer;
            return false;
        });

    });
</script>

</body>
</html>